<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="验证码登录" name="first">
        <el-card class="box-card" style="width: 400px;margin: auto">
          <h2>登录</h2>
          <el-form label-width="80px" :model="user">
            <el-form-item label="手机号">
              <el-input v-model="user.tel"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="user.telCode"></el-input>
              <el-button @click="getCode">发送验证码</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="普通登录" name="second">
        <el-card class="box-card" style="width: 400px;margin: auto">
          <h2>登录</h2>
          <el-form label-width="80px" :model="user">
            <el-form-item label="账号">
              <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="userLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
export default {
  name: 'LoginView',
  data () {
    return {
      user: {
        tel: '',
        telCode: '',
        codeKey: '',
        username: '',
        password: ''
      }
    }
  },
  methods: {
    getCode () {
      this.user.codeKey = uuidv4()
      this.axios.post('/user/getTelCode', this.user).then(res => {
        if (res.data.code === 200) {
          this.$message.success('获取成功')
        } else {
          this.$message.error('获取失败')
        }
      })
    },
    login () {
      this.axios.post('/user/mylogin', this.user).then(res => {
        if (res.data.code === 200) {
          this.$store.commit('setToken', res.data.jdata.token)
          this.$store.commit('setUserInfo', res.data.jdata.userInfo)
          this.$message.success('登录成功')
          this.$router.push('/list')
        } else {
          this.$message.error('登录失败')
        }
      })
    },
    userLogin () {
      this.axios.post('/user/userLogin', this.user).then(res => {
        if (res.data.code === 200) {
          this.$store.commit('setToken', res.data.jdata.token)
          this.$store.commit('setUserInfo', res.data.jdata.userInfo)
          this.$message.success('登录成功')
          this.$router.push('/list')
        } else {
          this.$message.error('登录失败')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
